import { useState, useCallback, useRef } from 'react'
import { OneBox, TwoBox, ThreeBox } from '@/component'
import './index.scss'

const MainPage = () => {
  const [Data, SetData] = useState([])
  const inputRef = useRef(null)
  const addComponent = useCallback(
    parameter => {
      SetData([...Data, parameter])
    },
    [Data]
  )
  const removeComponent = useCallback(
    itemId => {
      // inputRef.current.parentNode?.removeChild(inputRef.current)
      // console.log(inputRef.current.parentNode)
      // 上处通过ref去删除子节点,会存在子节点拖拽其他盒子，会指向原来的父节点的问题，
      // 考虑可能是节点DOM更新了，但ref未获取到最新的父节点DOM ，暂未找到解决方法
      const p = document.getElementById(itemId) // 获取到点击删除的DOM(没办法的办法)
      if (p.parentNode) {
        // 如果父节点存在，则删除父节点
        p.parentNode.removeChild(p)
      }
      // SetData(Data.filter(value => value.id !== itemId))
      // 使用此方法只能用于单列表  此处移动到其他位置的话会报找不到Dom的错误
    }, //筛去删除的项
    [Data] // 监听Data数据变化
  )
  return (
    <div className="MainContent">
      <OneBox
        Data={Data}
        ref={inputRef}
        addComponent={addComponent}
        removeComponent={removeComponent}
      />
      <TwoBox />
      <ThreeBox />
    </div>
  )
}
export default MainPage
